<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<title>MEGA 2.0</title>
<meta http-equiv="X-UA-Compatible" content="IE=Edge" />
<link rel="stylesheet" type="text/css" href="../css/style.css" />
<script type="text/javascript" src="../js/jquery-1.8.1.js"></script>
<script type="text/javascript" src="../js/jquery.jscrollpane.js"></script>
<script type="text/javascript" src="../js/jquery.mousewheel.js"></script>
<script type="text/javascript">
$(document).ready(function() {  

  function initTreePanelScroll()
  {
	  $('.fm-tree-panel').jScrollPane({enableKeyboardNavigation:false,showArrows:true, arrowSize:5,animateScroll: true});
  }
  initTreePanelScroll();
  $(window).bind('resize', function () 
  {
	  initTreePanelScroll();
  });
  
   

    //Demo of scripts.

    function initChatScrolling() {
	   var scrollBlockHeight = $('.fm-chat-block').outerHeight() - $('.fm-chat-input-scroll').outerHeight() - $('.fm-right-header').outerHeight();
	   $('.fm-chat-message-scroll').height(scrollBlockHeight);
	   $('.fm-chat-message-scroll').jScrollPane({enableKeyboardNavigation:false,showArrows:true, arrowSize:5});
    }
	initChatScrolling();
	
	function messageAreaResizing(textfield) {
	  var txt = $('.message-textarea'),
	      txtHeight =  txt.outerHeight(), 
	      hiddenDiv = $('.hiddendiv'),
		  pane = $('.fm-chat-input-scroll'),
		  content = txt.val(),
		  api;
		  
      content = content.replace(/\n/g, '<br />');
      hiddenDiv.html(content + '<br />');
	  
	  if (txtHeight != hiddenDiv.outerHeight() ) {
		txt.height(hiddenDiv.outerHeight());
	
	    if( $('.fm-chat-input-block').outerHeight()>=200) {
	        pane.jScrollPane({enableKeyboardNavigation:false,showArrows:true, arrowSize:5}); 
	        api = pane.data('jsp');
		    txt.blur();
		    txt.focus();
		    api.scrollByY(0);
		}
		else {
			api = pane.data('jsp');
			if (api) {
			  api.destroy();
			  txt.blur();
			  txt.focus();
			}
		}
		initChatScrolling();
	  }
	}
	
	$('.message-textarea').on('keyup', function () {
	    messageAreaResizing();
	});
	
	$(window).bind('resize', function () {
		messageAreaResizing();
		initChatScrolling();
	});

	

});
</script>
</head>

<body>
<div class="loading-spinner" style="display:none;"></div>
<div class="dark-overlay hidden"></div>
<div class="loading-spinner hidden"></div>
<div class="fm-dialog-overlay hidden"></div>


<div class="fmholder" id="fmholder">
  <div class="top-head"> 
    <a class="logo"></a> 
    <a class="top-menu-icon">Menu</a> 
    <div class="membership-status-block">
       <div class="membership-status free" style="display: block;">FREE</div>
    </div>
    <a class="user-name">Andrei.d</a>
    <div class="activity-status-block">
      <div class="activity-status online"></div>
    </div>
    <div class="cloud-popup-icon" style="display: block;"><span class="notification-num" style="display: none;">0</span></div>
    <div class="top-chat-notification"></div>
    <div class="top-search-bl">
       <div class="top-search-clear">
           <div class="top-clear-button"></div>
           <input type="text" value="Search" class="top-search-input">
       </div>
    </div>   
  </div>
  
  <div class="fm-main default">
    <div class="nw-fm-left-icons-panel">
          <div class="nw-fm-left-icon cloud-drive">
             <div class="nw-fm-left-tooltip">Cloud Drive</div>
          </div>
          <div class="nw-fm-left-icon shared-with-me">
             <div class="nw-fm-left-tooltip">Shared with me</div>
          </div>
          <div class="nw-fm-left-icon contacts">
             <div class="nw-fm-left-tooltip">Contacts</div>
          </div>
          <div class="nw-fm-left-icon conversations active">
             <div class="nw-fm-left-tooltip">Conversations</div>
          </div>
          <div class="file-transter-icon"></div>
    </div>
    <div class="fm-left-panel">
                <div class="left-pane-drag-handle ui-resizable-handle ui-resizable-e"></div>
                <!-- Please add one of necessary classname: "cloud-drive"/"shared-with-me"/"contacts"/"conversations" !-->
                <div class="fm-left-menu conversations">
                   <div class="nw-fm-tree-header cloud-drive"> 
                      <input type="text" value="Cloud Drive" placeholder="Cloud Drive">
                      <div class="nw-fm-settins-icon"></div>
                   </div>
                   <div class="nw-fm-tree-header shared-with-me"> 
                      Shared with me
                      <div class="nw-fm-settins-icon"></div>
                   </div>
                   <div class="nw-fm-tree-header contacts"> 
                      Contacts
                      <div class="nw-fm-settins-icon"></div>
                   </div>
                   <div class="nw-fm-tree-header conversations"> 
                      
                      <input type="text" value="Conversation" placeholder="Conversations">
                      <div class="nw-fm-settins-icon"></div>
                   </div>
                </div>
                <div class="fm-tree-panel">
                  
                  <!-- Please add "active" to necessary block to activate it !-->
                  <div class="content-panel cloud-drive">
                   
                  </div> 
                  <div class="content-panel shared-with-me">
                   
                  </div>
                  <div class="content-panel contacts">
                   
                  
                  </div> 
                  <div class="content-panel conversations active">
                     <div class="nw-tree-panel-header">
                       <span>Currently calling</span>
                     </div>
                     <div class="nw-conversations-item online current-calling">
                        <div class="nw-contact-status"></div>
                        <div class="nw-conversations-unread">0</div>
                        <div class="chat-cancel-icon"></div>
                        <div class="chat-time-txt">00:01</div>
                        <div class="nw-conversations-name">
                          Alex
                        </div>
                     </div>
                     <div class="nw-tree-panel-header">
                       <span>Current Conversations</span>
                       <div class="nw-tree-panel-arrows"></div>
                     </div>
                     <!-- Please add "unread" classname to show unread counter !-->
                     <div class="nw-conversations-item online unread">
                        <div class="nw-contact-status"></div>
                        <div class="nw-conversations-unread">3</div>
                        <div class="nw-conversations-name">
                          Andrei.d
                        </div>
                     </div>
                     <div class="nw-conversations-item offline">
                        <div class="nw-contact-status"></div>
                        <div class="nw-conversations-unread">0</div>
                        <div class="nw-conversations-name">
                          Bram van der Kolk
                        </div>
                     </div>
                     <div class="nw-tree-panel-header">
                       <span>Mega contacts</span>
                       <div class="nw-tree-panel-arrows"></div>
                     </div>
                     <div class="nw-conversations-item away">
                        <div class="nw-contact-status"></div>
                        <div class="nw-conversations-unread">0</div>
                        <div class="nw-conversations-name">
                          Eduardo
                        </div>
                     </div>
                     <div class="nw-conversations-item busy">
                        <div class="nw-contact-status"></div>
                        <div class="nw-conversations-unread">0</div>
                        <div class="nw-conversations-name">
                          César Rodas
                        </div>
                     </div>
                  </div>  
                </div>
              
              </div>
              
    <div class="fm-right-files-block">
      
      
      <!--Chat block !-->
      <div class="fm-chat-block">
      
        <!--Chat header !-->
        <div class="fm-right-header"> 
        <div class="nw-contact-avatar color5 verified">
          <div class="nw-verified-icon"></div>
          B
        </div>
        <div class="fm-chat-user-info star online">
            <div class="fm-chat-user-star"></div>
            <div class="fm-chat-user">Bram Van Der Kolk</div>
            <div class="nw-contact-status"></div>
            <div class="fm-chat-user-status"> Online </div>
            <div class="clear"></div>
        </div>
        
        <!-- New button !-->
        <div class="chat-button fm-start-video-call"> <span class="fm-chatbutton-arrow">Start video call ...</span> </div>
        <div class="chat-button fm-start-call"> <span class="fm-chatbutton-arrow">Start call ...</span> </div>
        
        <div class="chat-popup fm-add-contact-popup">
          <div class="fm-add-contact-arrow"></div>
          <div class="fm-chat-popup-button add-contact">Add contact to Conversation</div>
          <div class="fm-chat-popup-button send-contact">Send contact details</div>
        </div>
        
        <div class="chat-popup fm-send-files-popup">
          <div class="fm-send-files-arrow"></div>
          <div class="fm-chat-popup-button from-cloud">From your Cloud Drive</div>
          <div class="fm-chat-popup-button from-computer">From your computer</div>
        </div>
        
        <div class="chat-popup fm-start-call-popup">
          <div class="fm-send-files-arrow"></div>
          <div class="fm-chat-popup-button start-audio">Start audio call</div>
          <div class="fm-chat-popup-button start-video">Start video conference</div>
        </div>
        <div class="clear"></div>
      </div>
        <!-- End of Chat header !-->
        
        <div class="fm-chat-message-scroll"> 
         <div class="fm-chat-message-pad"> 
           
           <div class="fm-chat-messages-block chat-notification waiting-verification">
            <div class="fm-chat-messages-pad">
              <div class="nw-chat-notification-icon"></div>
              <div class="nw-contact-avatar color1">
                A
              </div>
              <div class="fm-chat-message"> 
                <div class="chat-message-date">2:02 pm</div>
                <div class="chat-message-txt">Waiting verification...</div> 
                <div class="clear"></div>
              </div>
              <div class="clear"></div>
            </div>
           </div>
           
           <div class="fm-chat-messages-block chat-notification verified">
            <div class="fm-chat-messages-pad">
              <div class="nw-chat-notification-icon"></div>
              <div class="nw-contact-avatar color1">
                A
              </div>
              <div class="fm-chat-message"> 
                <div class="chat-message-date">2:02 pm</div>
                <div class="chat-message-txt">Verfied</div> 
                <div class="clear"></div>
              </div>
              <div class="clear"></div>
            </div>
           </div>
           
           <div class="fm-chat-messages-block chat-notification establishing-connection">
            <div class="fm-chat-messages-pad">
              <div class="nw-chat-notification-icon"></div>
              <div class="nw-contact-avatar color1">
                A
              </div>
              <div class="fm-chat-message"> 
                <div class="chat-message-date">2:02 pm</div>
                <div class="chat-message-txt">Establishing encrypted connection…</div> 
                <div class="clear"></div>
              </div>
              <div class="clear"></div>
            </div>
           </div>
           
           <div class="fm-chat-messages-block chat-notification verification-skipped">
            <div class="fm-chat-messages-pad">
              <div class="nw-chat-notification-icon"></div>
              <div class="nw-contact-avatar color1">
                A
              </div>
              <div class="fm-chat-message"> 
                <div class="chat-message-date">2:02 pm</div>
                <div class="chat-message-txt">Verification skipped</div> 
                <div class="clear"></div>
              </div>
              <div class="clear"></div>
            </div>
           </div>
           
           <div class="fm-chat-messages-block chat-notification missed-call">
            <div class="fm-chat-messages-pad">
              <div class="nw-chat-notification-icon"></div>
              <div class="nw-contact-avatar color1">
                A
              </div>
              <div class="fm-chat-message"> 
                <div class="chat-message-date">2:02 pm</div>
                <div class="chat-message-txt">Missed call from <span class="chat-username">Bram Van Der Kolk</span></div> 
                <div class="clear"></div>
              </div>
              <div class="clear"></div>
            </div>
           </div>
           
            <div class="fm-chat-messages-block chat-notification call-timeout">
            <div class="fm-chat-messages-pad">
              <div class="nw-chat-notification-icon"></div>
              <div class="nw-contact-avatar color1">
                A
              </div>
              <div class="fm-chat-message"> 
                <div class="chat-message-date">2:02 pm</div>
                <div class="chat-message-txt">Call Timeout. Do you want to retry?</div> 
                <div class="fm-chat-file-button primary-button"><span>Retry</span></div>
                <div class="fm-chat-file-button secondary-button"><span>Cancel</span></div>
                <div class="clear"></div>
              </div>
              <div class="clear"></div>
            </div>
           </div>
           
           <div class="fm-chat-messages-block chat-notification connection-issue">
            <div class="fm-chat-messages-pad">
              <div class="nw-chat-notification-icon"></div>
              <div class="nw-contact-avatar color1">
                A
              </div>
              <div class="fm-chat-message"> 
                <div class="chat-message-date">2:02 pm</div>
                <div class="chat-message-txt">We are experiencing issues in establishing an encrypted connection. Do you want to retry?</div> 
                <div class="fm-chat-file-button primary-button">Retry</div>
                <div class="fm-chat-file-button secondary-button">Cancel</div>
                
                <div class="clear"></div>
              </div>
              <div class="clear"></div>
            </div>
           </div>
           
           <div class="fm-chat-messages-block chat-notification rejected-call">
            <div class="fm-chat-messages-pad">
              <div class="nw-chat-notification-icon"></div>
              <div class="nw-contact-avatar color1">
                A
              </div>
              <div class="fm-chat-message"> 
                <div class="chat-message-date">2:02 pm</div>
                <div class="chat-message-txt">Rejected Call</div> 
                <div class="clear"></div>
              </div>
              <div class="clear"></div>
            </div>
           </div>
           
           <div class="fm-chat-messages-block chat-notification call-dropped">
            <div class="fm-chat-messages-pad">
              <div class="nw-chat-notification-icon"></div>
              <div class="nw-contact-avatar color1">
                A
              </div>
              <div class="fm-chat-message"> 
                <div class="chat-message-date">2:02 pm</div>
                <div class="chat-message-txt">Call Dropped</div> 
                <div class="clear"></div>
              </div>
              <div class="clear"></div>
            </div>
           </div>
           
           <div class="fm-chat-messages-block chat-notification call-started">
            <div class="fm-chat-messages-pad">
              <div class="nw-chat-notification-icon"></div>
              <div class="nw-contact-avatar color1">
                A
              </div>
              <div class="fm-chat-message"> 
                <div class="chat-message-date">2:02 pm</div>
                <div class="chat-message-txt">Call Started with <span class="chat-username">Bram Van Der Kolk</span></div> 
                <div class="clear"></div>
              </div>
              <div class="clear"></div>
            </div>
           </div>
           
           <div class="fm-chat-messages-block chat-notification call-from-different-device">
            <div class="fm-chat-messages-pad">
              <div class="nw-chat-notification-icon"></div>
              <div class="nw-contact-avatar color1">
                A
              </div>
              <div class="fm-chat-message"> 
                <div class="chat-message-date">2:02 pm</div>
                <div class="chat-message-txt">Call answered on a different device</div> 
                <div class="clear"></div>
              </div>
              <div class="clear"></div>
            </div>
           </div>
           
           <div class="fm-chat-messages-block chat-notification call-ended">
            <div class="fm-chat-messages-pad">
              <div class="nw-chat-notification-icon"></div>
              <div class="nw-contact-avatar color1">
                A
              </div>
              <div class="fm-chat-message"> 
                <div class="chat-message-date">2:02 pm</div>
                <div class="chat-message-txt">Call Ended</div> 
                <div class="clear"></div>
              </div>
              <div class="clear"></div>
            </div>
           </div>
          
          
          
          
         </div> 
        </div>
        
        <div class="fm-chat-line-block">
          <div class="hiddendiv"></div>
          <div class="fm-chat-emotions-icon"></div>
          
          <div class="fm-chat-emotion-popup">
            <div class="fm-chat-arrow"></div>
            <div class="fm-chat-smile smile"></div>
            <div class="fm-chat-smile wink"></div>
            <div class="fm-chat-smile tongue"></div>
            <div class="fm-chat-smile grin"></div>
            <div class="fm-chat-smile confuse"></div>
            <div class="fm-chat-smile grasp"></div>
            <div class="fm-chat-smile sad"></div>
            <div class="fm-chat-smile cry"></div>
            <div class="fm-chat-smile angry"></div>
            <div class="fm-chat-smile smile"></div>
            <div class="clear"></div>
          </div>
          
          <div class="nw-chat-message-icon"></div>
          <div class="fm-chat-input-scroll">
            <div class="fm-chat-input-block">
              <textarea class="message-textarea" placeholder="Write a message..."></textarea>
            </div>
          </div>
          <div class="clear"></div>
        </div>
      </div>
      
      <!--end !--> 
      
    </div>
  </div>
  
  <div class="transfer-panel ui-resizable ui-droppable">
  <div class="transfer-drag-handle ui-resizable-handle ui-resizable-n"></div>
  <div class="transfer-icons-block">
    <!-- Please add "download-percents-0"-"download-percents-100" and "upload-percents-0"-"download-percents-100" !-->
    <div class="file-transfer-icon download-percents-0 upload-percents-0">
        <div class="file-transfer-download">
            <div class="file-transfer-upload"></div>
        </div>
    </div>
    <div class="transfer-panel-title">
        File transfers
    </div>
    <a class="transfer-clear-all-icon hidden"></a>
    <a class="tranfer-view-icon"></a>
    <a class="transfer-settings-icon"></a>
    <!-- Please add/remove "active" class to sjow/hide upload and download indicators !-->
    <div class="tranfer-upload-indicator">
        640 Kb/s
    </div>
    <div class="tranfer-download-indicator">
        1640 Kb/s
    </div>
    <a class="transfer-pause-icon"></a>
    <div class="clear"></div>
  </div>
</div>
  
</div>
</body>
</html>